
<div id="container">


    <div class="box outset">
        <img src="gambar/header.png"/>
    </div>
    

    <div class="bgUtama elipUtama">
     <ul id="nav">
        <li id="selected"><a href="#">Beranda</a></li>
        <li><a href="#">Profil</a></li>
        <li><a href="#">Portofolio</a></li>
        <li><a href="#">Kontak</a></li>
        <li><a href="#">Order</a></li>
       
    </ul>
        <div class="bgTengah">
            <p><b>CIATRUE</b></p>
            <p class="pa">
                Merupakan sofware house dan web developer yang menyediakan pembuatan
                software dan web.
            </p>

        </div>
    </div>

    <div class="bgSamping elipUtama"><p>Sponsor By</p></div>
<p class="nm">Design by awan brizik <br/> CIATRUE 2011</p>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
    (function($) {

        $.fn.spasticNav = function(options) {
	
            options = $.extend({
                overlap : 10,
                speed : 500,
                reset : 1500,
                color : '#d2d8ca',
                easing : 'easeOutExpo'
            }, options);
	
            return this.each(function() {
		
                var nav = $(this),
                currentPageItem = $('#selected', nav),
                blob,
                reset;
		 		
                $('<li id="blob"></li>').css({
                    width : currentPageItem.outerWidth(),
                    height : currentPageItem.outerHeight() + options.overlap,
                    left : currentPageItem.position().left,
                    top : currentPageItem.position().top - options.overlap / 2,
                    backgroundColor : options.color
                }).appendTo(this);
		 	
                blob = $('#blob', nav);
		 	
                $('li:not(#blob)', nav).hover(function() {
                    // mouse over
                    clearTimeout(reset);
                    blob.animate(
                    {
                        left : $(this).position().left,
                        width : $(this).width()
                    },
                    {
                        duration : options.speed,
                        easing : options.easing,
                        queue : false
                    }
                );
                }, function() {
                    // mouse out	
                    reset = setTimeout(function() {
                        blob.animate({
                            width : currentPageItem.outerWidth(),
                            left : currentPageItem.position().left
                        }, options.speed)
                    }, options.reset);
	
                });
		
            }); // end each
	
        };

    })(jQuery);
</script>


<script type="text/javascript">
    $('#nav').spasticNav();
</script>
